<template>
    <CommonCard :title="'今日销售额'" :value="`${salesToday as number}`">
      <div class="compare-wrap">
        <div class="compare">
          <div>日同比</div>
          <div class="emphasis">{{ salesGrowthLastDay }}%</div>
          <div
            :class="(salesGrowthLastDay as number)>0 ? 'increment' : 'decrement'"
          ></div>
        </div>
        <div class="compare">
          <div>日同比</div>
          <div class="emphasis">{{ salesGrowthLastMonth }}%</div>
          <div
            :class="(salesGrowthLastMonth as number)>0 ? 'increment' : 'decrement'"
          ></div>
        </div>
      </div>
  
      <!-- 底部具名插槽 -->
      <template #bottom>
        <span>昨日销售额</span>
        <span class="emphasis">{{ salesLastDay }}</span>
      </template>
    </CommonCard>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  
  export default defineComponent({
    name: "TodatSales",
  });
  </script>
  
  <script setup lang="ts">
  import CommonCard from "./CommonCard.vue";
  //引入store
  import { useDataStore } from "@/stores/reportData";
  //引入计算属性
  import { computed } from "vue";
  //得到store对象
  const dataStore = useDataStore();
  
  //通过计算属性得到需要的数据
  const salesToday = computed(() => dataStore.reportData.salesToday);
  const salesGrowthLastDay = computed(
    () => dataStore.reportData.salesGrowthLastDay
  );
  const salesGrowthLastMonth = computed(
    () => dataStore.reportData.salesGrowthLastMonth
  );
  const salesLastDay = computed(() => dataStore.reportData.salesLastDay);
  </script>
  
  <style lang="scss" scoped>
  .compare-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    .compare {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
  </style>
  